<template>
	<view class="container">
		<view class="addBox flex-ac" @click="$Jump.Open('./search')">
			<view class="inputBox flex-ac">
				<image src="../../../static/img/ss.png" mode=""></image>
				<input disabled v-model="searchWords" type="text" placeholder="请输入订单号" />
			</view>
			<view class="btn-search" @click="search">查询</view> 
		</view> 
		<view class="body">
			<scroll-view scroll-y="true" class="scrollView" @scrolltolower="getList()"
				:refresher-enabled='true' :refresher-triggered='isFresh' @refresherrefresh='freshList_()'
				refresher-background='#f7f7f7'>
				<u-gap height="20"></u-gap>
				<view class="item" v-for="(item, index) in list" :key="index" @click.stop="selOrder(item)">
					<view class="tit flex-ac flex-b">
						<view class="flex-ac" style="color: #1684FC;">{{ item.orderSn }}</view>
						<image v-if="item.orderSn == order.orderSn" src="../../../static/img/choice_gou.png" mode="">
						</image>
						<image v-else src="../../../static/img/choice_no.png" mode=""></image>
					</view>
					<view class="content">
						<view class="info">
							<view class="time flex-ac">
								<view class="zuhangxie flex-ac">
									<view class="zhuang">装</view>
									<view>
										<div>发货人：{{ item.senderName || '' }}-{{ item.senderMobile || '' }}
										</div>
										<div style="margin-top: 6rpx;" class="flex-ac">
											<div>{{ item.loadingAddress || '' }}</div>
											<image src='/static/img/dh.png' mode="aspectFit"></image>
										</div>
									</view>
								</view>
							</view>
							<view class="time flex-ac" style="margin-top: 20rpx">
								<view class="zuhangxie flex-ac">
									<view class="xie">卸</view>
									<view>
										<div>收货人：{{ item.receiverName || '' }}-{{ item.receiverMobile || ''
														}}
										</div>
										<div style="margin-top: 6rpx;" class="flex-ac">
											<div>{{ item.unloadingAddress || '' }}</div>
											<image src='/static/img/dh.png' mode="aspectFit"></image>
										</div>
									</view>
								</view>
							</view>
							<view class="time flex-ac" style="padding-left: 60rpx;">
								<view>客户名称：{{ item.customerName || '' }}</view>
							</view>
							<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
								<view>里程：{{ item.mileage || '' }}</view>
								<view>额定油耗：{{ item.oilConsum || '' }}</view>
							</view>
							<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
								<view>品名：{{ item.goodsName || '' }}</view>
								<view>单价：<text v-if="item.price">{{ item.price.toFixed(2) }}</text> </view>
							</view>
							<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
								<view>创建：{{ item.createTime || '' }}</view>
							</view>
							<view class="time flex-ac flex-b" style="padding-left: 60rpx;">
								<view style="width: 100%;" class="Line1">备注：{{ item.remark || '' }}</view>
							</view>
						</view>
					</view>
				</view>
				<u-gap height="180"></u-gap>
				<x-nothing v-if="list.length === 0"></x-nothing>
				<u-gap height="2"></u-gap>
			</scroll-view>
		</view>

		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="sure">确定</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>


	</view>
</template>

<script>
	import {
		goodsType
	} from '@/utils/goodsType.js'; // 
	export default {
		data() {
			return {
				topDis: this.$app.globalData.topDis,
				navlist: [{
					name: '待调度'
				}, {
					name: '调度中'
				}, {
					name: '已结束',
				}],
				currentStatus: 1,
				isFresh: false,
				queryForm: {
					current: 1,
					size: 10,
					orderSn: ''
				},
				orderStatus: 'dispatchable',
				list: [],
				goodsType: goodsType,
				order: '',
				searchWords: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.queryForm.current = 1
			this.getList()
		},
		methods: {
			// 选择订单
			selOrder(item) {
				this.order = item
			},
			search(){
				this.queryForm.current = 1
				this.getList() 
			},
			sure(){
				if(this.order === ''){
					return this.$Toast.message("请选择订单")
				}
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.params.orderId = this.order.id
				prevPage.$vm.orderSn = this.order.orderSn
				prevPage.$vm.$forceUpdate()
				this.$Jump.Back(1)
			},

			// 订单列表 
			getList() {
				this.$Net.get(`/order/page/${this.orderStatus}`, this.queryForm).then(res => {
					console.log('订单列表:', res)
					if (this.queryForm.current == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
					this.queryForm.current++
					setTimeout(() => {
						this.isFresh = false
					}, 500)
				})
			},
			// 下拉刷新
			freshList_() {
				this.queryForm.current = 1
				this.isFresh = true
				this.getList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.foot {
		width: 100%;
		padding: 30rpx;
		padding-top: 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;

		.btnBox {
			width: 100%;

			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}

			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}

	.addBox {
		width: 100%;
		height: 100rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f7f7f7;
		background-color: #ffffff;

		.inputBox {
			flex: 1;
			height: 70rpx;
			border-radius: 40rpx;
			background-color: #f7f7f7;
			padding: 0 20rpx;

			input {
				flex: 1;
				color: #333;
			}
		}

		.btn-search {
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #1F82FE;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}


	.body {
		width: 100%;
		height: calc(100vh - 100rpx);
		padding: 0 16rpx;

		.scrollView {
			width: 100%;
			height: 100%;
		}

		.item {
			width: 100%;
			background-color: #fff;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 10rpx;

			.content {
				padding: 20rpx;
				padding-top: 0;

				.menuBox {
					padding-top: 20rpx;
					flex-direction: row-reverse;

					.fb {
						width: 170rpx;
						height: 70rpx;
						background: #1684FC;
						border-radius: 10rpx;
						color: #fff;
						font-size: 30rpx;
						margin-left: 20rpx;
					}

					.bj {
						padding: 14rpx 16rpx;
						background-color: #1684FC;
						border-radius: 5px;
						color: #fff;
						font-size: 26rpx;
						line-height: 42rpx;
						margin-left: 20rpx;
					}

					.zf {
						padding: 14rpx 16rpx;
						border: 1px solid #FF0000;
						border-radius: 5px;
						color: #FF0000;
						font-size: 26rpx;
						line-height: 42rpx;
						margin-left: 20rpx;
					}
				}

				.money {
					margin-top: 20rpx;
					width: 100%;
					padding-right: 20rpx;
					text-align: right;

					.num {
						width: 100%;
						font-size: 40rpx;
						color: #F66923;
						font-weight: bold;
						line-height: 56rpx;
					}

					.text {
						font-size: 26rpx;
						color: #F66923;
					}

					.opac {
						opacity: 0.5;
					}
				}

				.info {
					// margin-top: 20rpx;
					width: 100%;
					// height: 210rpx;
					background: #fafafa;
					border-radius: 20rpx;
					padding: 24rpx 20rpx;

					.time {
						width: 100%;
						margin-bottom: 10rpx;

						view {
							font-size: 26rpx;
							color: #101010;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.zuhangxie {
							.zhuang {
								flex-shrink: 0;
								width: 52rpx;
								height: 52rpx;
								font-size: 30rpx;
								color: #fff;
								background-color: #2BBC4A;
								border-radius: 4rpx;
								line-height: 52rpx;
								text-align: center;
								margin-right: 10rpx;
							}

							.xie {
								flex-shrink: 0;
								margin-top: 6rpx;
								width: 52rpx;
								height: 52rpx;
								font-size: 30rpx;
								color: #fff;
								background-color: #1684FC;
								border-radius: 4rpx;
								line-height: 52rpx;
								text-align: center;
								margin-right: 10rpx;

							}
						}
					}

					.time:last-child {
						margin-bottom: 0;
					}
				}

				.label {
					width: 100%;
					margin-top: 10rpx;

					// font-size: 24rpx;
					.hd {
						.label-1 {
							font-size: 26rpx;
							padding: 2rpx 10rpx;
							color: #3DB020;
							border: 2rpx solid #3db020;
							border-radius: 6rpx;
							line-height: 36rpx;
							margin-right: 10rpx;
						}

						.label-2 {
							color: #F66923;
							border: 2rpx solid #F66923;
						}

						.label-3 {
							color: #666666;
							border: 2rpx solid #666666;
						}

						.label-1:last-child {
							margin-right: 0;
						}
					}

					.bd {
						color: #999;
						font-size: 26rpx;
					}

					.opac {
						opacity: 0.5;
					}

					.hui {
						color: #999 !important;
						border-color: #999 !important;
					}
				}

				.dz {
					font-size: 34rpx;
					font-weight: bold;

					.md {
						width: 48rpx;
						height: 48rpx;
						margin: 0 20rpx;
					}

					.hui {
						color: #999;
					}
				}
			}

			.tit {
				width: 100%;
				// background: #ffffff;
				padding: 0 20rpx;

				// border-bottom: 1rpx solid #F5F7FB;
				view {
					height: 80rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.head {
		width: 100%;
		height: 148px;
		position: relative;
		background-color: #fff;

		.box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;

			.inputBox {
				width: 100%;
				height: 108rpx;
				padding-left: 30rpx;
				padding-top: 4rpx;

				.input {
					width: 480rpx;
					height: 80rpx;
					background: rgba(255, 255, 255, .8);
					border-radius: 20rpx;
					padding: 0 30rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					input {
						font-size: 30rpx;
						color: #333;
						flex: 1;
					}
				}
			}

			.navBox {
				width: 100%;
				height: 100rpx;
			}
		}

	}
</style>